<template>
  <section class="home-container">
      <div class="main">
          <div class="post-item" v-for="item in navBanner" :id="item.id">
              <div class="title-box">
                  <h2 class="title">{{ item.name }}</h2>
              </div>
              <div class="content-list" v-if="item.children instanceof Array">
                  <ul class="list">
                      <li class="list-item" v-for="vo in item.children">
                          <RouterLink class="list-item-link" to="/posts" :title="vo.name">{{ vo.name }}</RouterLink>
                      </li>
                  </ul>
              </div>
              <div class="content" v-else v-html="item.children"></div>
          </div>
      </div>
  </section>
</template>
<script setup>
import useCommonStore from '@/stores/common'
import {computed} from "vue";
const common = useCommonStore()
const navBanner = computed(() => common.banner)
console.log('navBanner===>', navBanner)

</script>
<style scoped lang="scss">
.home-container {
    background: url(../assets/images/bg.jpg) no-repeat top center;
    @include respondTo(['phone','pad','notebook']) {
        background: none
    }
}
.main {
    width: 1160px;
    margin: 0 auto 0 auto;
    padding: 0 20px 50px 20px;
    @include respondTo(['phone','pad','notebook']) {
        width: 100%;
    }
    .post-item {
        padding-top: 40px;
        .title-box {
            position: relative;
            display: flex;
            justify-content: center;
            height: 70px;
            width: 1160px;
            margin-bottom: 15px;
            background: url(../assets/images/title-bg.jpg) no-repeat center;
            @include respondTo(['phone','pad','notebook']) {
                width: 100%;
                margin-bottom: 20px;
            }
            .title {
                font-size: 30px;
                color: #fff;
                font-weight: bold;
                position: absolute;
                top: 6px;
                text-align: center;
                @include ellipsis(150px)
            }
        }
        .content {
            font-size: 18px;
            line-height: 2em;
            text-indent: 2em;
            text-align: justify;
        }
        .content-list {
            font-size: 18px;
            .list {
                .list-item {
                    background: url(../assets/images/point.png) no-repeat 0 19px;
                    border-bottom: 1px dashed #8f8f8f;
                    padding-left: 30px;
                }
                .list-item-link {
                    display: inline-block;
                    max-width: 85%;
                    @include ellipsis;
                    font-size: 20px;
                    line-height: 48px;
                    color: #333;
                    transition: color .2s ease-in-out;
                    &:hover {
                        color: $base-color;
                    }
                }
            }
        }
    }
}
</style>
